<template>
  <div class="my-dialog">
  <el-dialog
    v-model="dialogVisible"
    width="620px"
    :close-on-click-modal="false"
  >
    <div class="form-title text-center">
      免费申请试用，招聘增效从现在开始
    </div>
    <div class="form-tip text-center">
      请填写真实信息，我们将有专属顾问在1个工作日内联系您
    </div>
    <div class="flex-center">
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      class="demo-ruleForm"
    >
        <el-form-item prop="userName">
          <el-input v-model.trim="ruleForm.userName" placeholder="请输入您的姓名" maxlength="50"></el-input>
        </el-form-item>
        <el-form-item prop="companyName">
          <el-input v-model.trim="ruleForm.companyName" placeholder="请输入您的企业名称" maxlength="50"></el-input>
        </el-form-item>
        <el-form-item prop="jobTitle">
          <el-input v-model.trim="ruleForm.jobTitle" placeholder="请输入您的职位" maxlength="50"></el-input>
        </el-form-item>
        <el-form-item prop="phone">
          <el-input  v-model.trim="ruleForm.phone" placeholder="请输入您的手机号名"></el-input>
        </el-form-item>
        <el-form-item>
          <div class="registerBtn mouse-cursor text-center" @click="submitForm('ruleForm')">立即报名试用</div>
        </el-form-item>
    </el-form>
    </div>
  </el-dialog>
  </div>
</template>
<script>
import { validPhone } from '@/utils/validate'
import { trialApplySubmit } from '@/api/register.js'
import { ElMessage } from 'element-plus'
export default {
  name: '',
  data () {
    const validatePhone = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入手机号码'))
      }
      else if (!validPhone(value)) {
        callback(new Error('请输入正确的手机号码'))
      } else {
        callback()
      }
    }
    return {
      dialogVisible: false,
      ruleForm: {
        userName: '',
        companyName: '',
        jobTitle: '',
        phone: '',
      },
      rules: {
        userName: [
          {
            required: true,
            message: '请输入姓名',
            trigger: 'blur',
          }
        ],
        companyName: [
          {
            required: true,
            message: '请输入企业名称',
            trigger: 'blur',
          }
        ],
        jobTitle: [{
            required: true,
            message: '请输入职位',
            trigger: 'blur',
          }],
        phone:[{
            required: true,
            validator: validatePhone,
            trigger: 'blur',
          }],
      },
    }
  },
  methods: {
    show() {
      this.dialogVisible = true
    },
    submitForm(formName) {
      console.log(this.ruleForm)
      this.$refs[formName].validate((valid) => {
        if (valid) {
           trialApplySubmit(this.ruleForm).then(res => {
            if (res.data.bizCode == 'SUCCESS' && res.data.respCode == '00000') {
              this.dialogVisible = false
              this.$emit('registerSuccess')
            }else {
              ElMessage.error(res.data.bizMsg)
            }
          })
        } else {
          return false
        }
      })
    },
  }
}
</script>
<style lang="less" scoped>
::v-deep .el-dialog__body{
  padding:0;
}
.form-title{
  font-size: 24px;
  color:@color3;
  margin-top:71px;
}
.form-tip{
  font-size: 14px;
  color:@color6;
  margin:10px 0 42px;
}
.demo-ruleForm{
  width:384px;
  padding-bottom:60px;
  // flex-direction: column;
  .registerBtn{
    height: 46px;
    line-height: 46px;
    background: #eeeeee;
    border-radius: 23px;
    font-size: 14px;
    color:@color9;
    margin-top:20px;
  }
}
</style>


